<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-user"></i>用户管理</template>
          <el-menu-item index="1-1">用户列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-button type="primary" @click="showAddUserDialog">添加用户</el-button>
      </el-header>

      <el-main>
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="name" label="姓名" width="150"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
          <el-table-column prop="role" label="角色" width="150"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="showEditUserDialog(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="添加用户" :visible.sync="addUserDialogVisible" width="30%">
          <el-form :model="newUser" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="newUser.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="newUser.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="newUser.role"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addUserDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="编辑用户" :visible.sync="editUserDialogVisible" width="30%">
          <el-form :model="editedUser" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="editedUser.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="editedUser.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="editedUser.role"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editUserDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUser">确 定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
        { id: 2, name: '李四', email: 'lisi@example.com', role: '普通用户' },
        { id: 3, name: '王五', email: 'wangwu@example.com', role: '普通用户' },
      ],
      addUserDialogVisible: false,
      editUserDialogVisible: false,
      newUser: { id: null, name: '', email: '', role: '' },
      editedUser: { id: null, name: '', email: '', role: '' },
    };
  },
  methods: {
    showAddUserDialog() {
      this.addUserDialogVisible = true;
      this.newUser = { id: null, name: '', email: '', role: '' };
    },
    addUser() {
      if (this.newUser.name && this.newUser.email && this.newUser.role) {
        this.newUser.id = this.users.length + 1;
        this.users.push(this.newUser);
        this.addUserDialogVisible = false;
      } else {
        this.$message.error('请填写完整信息');
      }
    },
    showEditUserDialog(user) {
      this.editedUser = { ...user };
      this.editUserDialogVisible = true;
    },
    updateUser() {
      if (this.editedUser.name && this.editedUser.email && this.editedUser.role) {
        const index = this.users.findIndex(user => user.id === this.editedUser.id);
        if (index !== -1) {
          this.users.splice(index, 1, this.editedUser);
        }
        this.editUserDialogVisible = false;
      } else {
        this.$message.error('请填写完整信息');
      }
    },
    deleteUser(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.users.findIndex(user => user.id === id);
        if (index !== -1) {
          this.users.splice(index, 1);
        }
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
  },
};
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>